<template>
    <div>
      <div class="caidanming"><strong>药品进销存 /</strong>订单页面</div>  
      <div class="title">订单页面</div>
        <h3 class="p">订单列表</h3>
        <div class="section1-1">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="输入患者姓名" class="input1" />
      </div>
       <div class="section1-2">
           <span class="ddspan">订单状态 :</span>
          <el-select v-model="value" placeholder="全部">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
              @click="ChangeOptions"
            ></el-option>
          </el-select>
        </div>
         <!-- 表格 -->
    <div class="section2">
      <el-table
        ref="multipleTable"
        :data="newList"
        tooltip-effect="dark"
        style=" font-size:13px"
        @selection-change="handleSelectionChange"
        :row-style="{height:'60px'}"
        :header-cell-style="{color:'',borderBottom:'2px solid #39b9ae'}"
      >
        <!-- 勾选框 -->
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="address" label="序号" width="100"></el-table-column>
        <el-table-column prop="name" label="编号" width="150"></el-table-column>
        <el-table-column prop="name" label="采购诊所" width="155"></el-table-column>
        <el-table-column prop="name" label="订单总价" width="155"></el-table-column>
        <el-table-column prop="name" label="采购时间" width="155"></el-table-column>
        <el-table-column prop="name" label="订单状态" width="155"></el-table-column>
        <el-table-column prop="name" label="操作" width="155">
            
       <!-------------------------------- 模态框分界线 ----------------------------------------->
        

        <!-------------------------------- 结束分割线 ----------------------------------------->
        </el-table-column>
        <el-table-column prop="name" label="确认收货" width="155">
              <el-button  @click="QRShouHuo()" plain >确认收货</el-button></el-table-column>  
      </el-table>
    </div>
    


                           <!-- 模态框内容 -->
 <el-button  @click="dialogFormVisible = true" plain >查看详情</el-button>
              <div class="motaikuang">
          <el-dialog title="订单信息" :visible.sync="dialogFormVisible" width="950px">
            <el-form :model="form">
      <div class="section2">
        <el-table
          ref="multipleTable"
          :data="newList"
          tooltip-effect="dark"
          style=" font-size:13px"
          @selection-change="handleSelectionChange"
          :row-style="{height:'60px'}"
          :header-cell-style="{color:'',borderBottom:'2px solid #39b9ae'}"
        >
          <!-- 勾选框 -->
        <el-table-column prop="address" label="序号" width="100"></el-table-column>
        <el-table-column prop="name" label="药品名称" width="162"></el-table-column>
        <el-table-column prop="name" label="数量" width="162"></el-table-column>
        <el-table-column prop="name" label="药品规格" width="162"></el-table-column>
        <el-table-column prop="name" label="价格" width="162"></el-table-column>
        <el-table-column prop="name" label="状态" width="162">
            <template>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="modify(scope.row, 0)">待入库</el-dropdown-item>
                  <el-dropdown-item @click.native="modify(scope.row, 1)">已入库</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
        </el-table-column>
        </el-table>
      </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" class="btnbtn1">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false" class="btnbtn2">确 定</el-button>
            </div>
          </el-dialog>
        </div>




   </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      chooseList:[],
      newList:[],
       options: [{
          value: '0',
          label: '全部'
        },{
          value: '1',
          label: '待收货'
        }, {
          value: '2',
          label: '已收货'
        }],
        value: '',
          form: {
        xuhao: '',
         name: '',
        shuliang: '',
        ypguige: '',
        jiage: '',
        zhuangtai: '',
        type: [],
      },
    };
  },
  methods: {
    QRShouHuo() {
      console.log('确认收货');
    },
    ChangeOptions(){
     console.log('点击打印下拉框选中的状态');
    },
      // 当页数变化时触发
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
      // row当前行对象
    // index用来判断点的是已入库或者待入库
    modify(row, index) {
      // this.$refs.modifyinfo.open(row);
      //返回当前对象
      if (index === 0) {
        this._data.chooseList = row;
        console.log(this._data.chooseList);
      } else if (index === 1) {
      } 
      console.log(row, index);
    },
  },
};
</script>
<style scoped>
.p {
  text-align: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
/* 搜索框 */
.section1-1 {
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
}
.input1 {
  width: 150px;
  height: 30px;
  border: none;
  margin-left: 10px;
}

input:focus {
  border: none;
  outline: none;
}
.section1-2 {
    display: inline-block;
  width: 150px;
  margin-left: 30px;
  position: relative;
   top: -57px;
 left: 970px;
}
.section1-2 >>> .el-input__inner {
  width: 150px;
  height: 35px;
}
.ddspan{
 display: inline-block;
 position: relative;
 top: 25px;
 left: -85px;
}
.btnbtn1 :hover{
color:#39b9ae;
}
.btnbtn2{
  background-color: #39b9ae;
  border:1px solid #39b9ae;
}
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}


</style>